<template>
    <!-- 视图部分 -->
    <div>
        <van-nav-bar title="当前城市-" >
        <template #left>
            <van-icon class="iconfont icon-quxiao" @click='toFilm' size="20" color='#000' />
        </template>
        </van-nav-bar>
        <div class="search1">
            <span class="iconfont icon-sousuo search"></span>
            <input class="search2" placeholder="输入城市名或拼音名"/>     
            <!-- </input> -->
        </div>
        <div class="pos">
            <p>GPS显示你所在的城市</p>
            <div class="pos1">定位失败</div>
            <p>热门城市</p>
            <div class="hotCity">
                <div>北京</div>
                <div>上海</div>
                <div>广州</div>
                <div>深圳</div>
            </div>
        </div>
        <div class="cont" :citylist='newcitylist'>
            <ul v-for="item,index in citylistarr" :key="index">
                <h3 class="title">{{item.title}}</h3>
                <li v-for="item1,index1 in item.list" :key='index1'>{{item1.name}}</li>
            </ul>  
        </div>
        <!-- <div class="cont" v-for='(item,index) in char' :key="index">
            <h3 class="title">{{item.toUpperCase()}}</h3>
            <ul v-for="item2 in des[`${item}`]" :key='item2'>
                <li>{{item2}}</li>
            </ul> 
        </div> -->
        <div class="lie">
        <ul v-for='(items,indexs) in char' :key='indexs' >
            <li>{{items.toUpperCase()}}</li>
        </ul>
        </div>
    </div>
</template>

<script>
// 逻辑部分
import uri from "@/config/uri";
export default {
    data(){
        return{
                citylist:[],
                citylistarr:[],
                char:['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'],
            }
        },
    computed:{
        newcitylist:function(){
            // console.log("执行了我！");
            let letter=[];
            let k=0;
            for(let i=65;i<=90;i++){
                letter[k]=String.fromCharCode(i);
                k++;
            }
            this.citylistarr=[];
            for(let i=0;i<letter.length;i++){
                this.citylistarr[i]={};
                this.citylistarr[i]['title']=letter[i];
                // console.log(this.citylistarr[i]['title']);
                this.citylistarr[i]['list']=[];
                let x=0;
                for(let j=0;j<this.citylist.length;j++){
                    if(this.citylist[j].pinyin.charAt().toUpperCase()==letter[i]){
                        this.citylistarr[i]['list'][x]=this.citylist[j];
                        // console.log(this.citylistarr[i]['list'][x]);
                        x++;
                    }
                }
            }
            for(let i=0;i<this.citylistarr.length;i++){
                if(this.citylistarr[i].list.length==0){
                    this.citylistarr.splice(i,1);
                    i--;
                }
            }
            // console.log(this.citylistarr);
            return this.citylistarr;
        }
    },
    mounted(){
        this.getData();
    },
    methods:{
        getData(){
            this.$http.post(uri.getCityInfo).then((data)=>{
                this.citylist=data.data.cities;  
            })   
        },
        toFilm(){
            this.$router.push('/films/nowPlaying');
        }
    }
    // created(){
        // if(!localStorage.getItem('des')){
        //     // console.log("hahha");
        //     this.$http.post(uri.getCityInfo).then((data)=>{
        //     let t=0;
        //     let val='';
        //     let city=data.data.cities;
        //     // let ;
            //采用的是数组-对象的数据存储格式，对获取回来的数据进行二次处理
            // this.char.forEach(ele=>{
            //     // this.des.push({});
            //     this.des[ele]=[];
            // })
            // console.log(city);
            // city.forEach(ele => {
            //     // 这里获取首字母
            //    val= ele['pinyin'].substr(0,1);
            //    this.des[val].push(ele['name']);
            // });
            // console.log(this.des['b']);
            // console.log(JSON.stringify(this.des['b']));
            // localStorage.setItem('des',JSON.stringify(this.des['b']));
            
        // })}else{
            // this.des=JSON.parse(localStorage.getItem('des'));
        // }

    // }
}
</script>

<style scoped>
/* 样式部分 */
.pos{
    font-size:14px;
    color:#888;
    overflow: hidden;
}
.pos p{
    padding-left:15px;
}
.title{
    background:#eee;
    margin-right:20px;
    padding:5px;
    padding-left:15px;
    font-size:12px;
    color:#999;
}
.cont li{
    border-bottom:1px solid #eee;
    padding:10px 0px 10px 20px;
    margin-right:20px;
    font-size:12px;
}
.lie{
    position:fixed;
    right:0;
    top:390px;
}
.pos1{
    width:25%;
    padding:10px;
    background:#eee;
    font-size:12px;
    text-align: center;
    box-sizing:border-box;
    margin-left:15px;
    color:black;
}
.search{
    display:inline-block;
    background:white;
    width:15px;
    /* height:px; */
    padding:7px 10px;
    position: relative;
    top:2px;
    left:1px;
}
.search1{
    height:36px;
    padding:6px 10px;
    background:#eee;
}
.search2{
    border:0;
    outline:none;
    margin-top:2px;
    font-size:12px;
    color:#999;
    width:90%;
    height:33px;
    padding:5px 5px;
    box-sizing: border-box;
    background:white;
}
.hotCity div{
    text-align: center;
    width:25%;
    background:#eee;
    float:left;
    color:black;
    padding:10px;
    box-sizing:border-box;
    font-size:12px;
    margin-left:20px;
    margin-bottom:15px;
}
</style>